<template>
	<view class="addr-choose-box" v-if="JSON.stringify(address)=='{}'">
		<button type="primary" size="mini" @click="chooseAddress">请选择收货地址</button>
	</view>
	<view class="addr-info-box" v-else @click="chooseAddress">
		<view class="addr-row1">
			<view class="addr-row1-left">
				<view class="username">
					<uni-icons type="contact"></uni-icons>
					收货人: {{address.userName}}
				</view>
			</view>
			<view class="addr-row1-right">
				<view class="phone">
					<uni-icons type="phone"></uni-icons>
					电话: {{address.telNumber}}
				</view>
			</view>
		</view>
		<view class="addr-row2">
			<view class="addr-row2-left">
				<view class="address">
					<uni-icons type="location"></uni-icons>
					收货地址: {{addr}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { mapGetters } from 'vuex'
	import {mapMutations,mapActions} from 'vuex'
	export default {
		name:"my-address",
		data() {
			return {
				
			}
		},
		onLoad(){
			console.log(this.address)
		},
		computed:{
			...mapGetters('user',['addr']),
			...mapState('user',['address','userInfo'])
		},
		methods:{
			...mapMutations('user', ['updateAddress']),
			async chooseAddress(){
				if(JSON.stringify(this.userInfo)=='{}'){
					uni.switchTab({
						url:'/pages/my/my'
					})
				}else{
					const succ = await uni.chooseAddress()
					if(succ.errMsg=="chooseAddress:ok"){
						this.updateAddress(succ)
					}
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.addr-choose-box{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		border-bottom: 1px #efefef solid;
	}
	.addr-info-box{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 100%;
		font-size: 14px;
		.addr-row1{
			margin: 10px;
			display: flex;
			justify-content: space-between;
		}
		.addr-row2{
			margin: 10px;
			
		}
	}
</style>